<template>
	<qh-page-view title="确认订单">
		<view class="settlement-box flex-column-100" v-if="pageLoaded">
			<view class="settlement-tab-box">
				<qh-card-tabs v-model="form.pickup_type" :list="pickup_list" keyField="id" @change="changePickup"></qh-card-tabs>
				<!-- 自提展示的门店信息 -->
				<view class="item-box flex-spb-cn pad-20" v-if="form.pickup_type == 1" @click="toStore">
					<view class="store-box flex-row-100">
						<view class="flex-cn">
							<text class="store-name text-ellipsis">{{store.store_name}}</text>
							<view class="store-distance">
								<text class="qh-rt-single qh-rt-a-zu4414 position-icon"></text>
								<text>{{store.distance}}km</text>
							</view>
						</view>
						<view class="store-address text-ellipsis">{{store.address}}</view>
						<view class="store-business">营业时间：{{store.business}}</view>
					</view>
					<text class="qh-rt-single qh-rt-a-zu4425 right-icon"></text>
				</view>
				<!-- 配送、快递发货展示的收货信息 -->
				<view class="item-box pad-20" v-if="form.pickup_type != 1">
					<view class="address-box" v-if="address.id">
						<view class="flex-spb-cn" @click="toAddress">
							<view class="user-address flex-cn">
								<text class="qh-rt-single qh-rt-a-zu4414 position-icon primary"></text>
								<text class="text-ellipsis">{{address.address}}</text>
							</view>
							<text class="qh-rt-single qh-rt-a-zu4425 right-icon"></text>
						</view>
						<view class="user-info">{{address.name}} {{handlePhone(address.phone)}}</view>
						<view class="flex-spb-cn" @click="toStore">
							<view class="store-name flex-cn">
								<text class="qh-rt-single qh-rt-a-zu4313 store-icon"></text>
								<text class="text-ellipsis">{{store.store_name}}</text>
							</view>
							<text class="qh-rt-single qh-rt-a-zu4425 right-icon"></text>
						</view>
					</view>
					<view v-else class="address-empty flex-cn-cn" @click="toAddress">+ 请选择收货地址</view>
				</view>
			</view>
			<!-- 选择时间 -->
			<view class="item-box">
				<view class="item-list flex-spb-cn" v-if="form.pickup_type != 3" :class="{'border-bottom': form.pickup_type != 1}">
					<text class="item-value">时间选择</text>
					<view v-show="form.pickup_type == 1">
						<choose-time v-model="choose_pickup_date" :time-range="storeSet.new_business_time" :delay-time="storeSet.pickup_delayed_time"
							:auto-set-time="storeSet.auto_set_time == 1"></choose-time>
					</view>
					<view v-show="form.pickup_type == 2">
						<choose-time v-model="choose_send_date" :time-range="storeSet.new_business" :delay-time="storeSet.send_delayed_time"
							:auto-set-time="storeSet.auto_set_time == 1"></choose-time>
					</view>
				</view>
				<view class="item-list" v-if="form.pickup_type != 1">
					<view class="flex-spb-cn">
						<text class="item-value">{{form.pickup_type == 2 ? '配送费' : '运费'}}</text>
						<view class="flex-cn">
							<text class="actual-delivery-fee" v-if="actual_delivery_fee < form.delivery_fee">￥{{form.delivery_fee}}</text>
							<text class="item-value">￥{{actual_delivery_fee}}</text>
						</view>
					</view>
					<text v-if="form.pickup_type == 2" class="delivery-tip">配送范围{{storeSet.service_radius}}km，实际距离{{range.distance}}km</text>
				</view>
			</view>
			<!-- 自提预留取货人信息 -->
			<view class="item-box" v-if="form.pickup_type == 1">
				<view class="item-list flex-spb-cn border-bottom">
					<text class="item-value" maxlength="20">姓名</text>
					<input type="text" v-model="form.link_name" class="item-value item-input" placeholder-class="pl-30" placeholder="请输入姓名">
				</view>
				<view class="item-list flex-spb-cn">
					<text class="item-value">手机号</text>
					<input type="number" maxlength="11" v-model="form.mobile_phone" class="item-value item-input" placeholder-class="pl-30"
						placeholder="请输入手机号">
				</view>
			</view>
			<!-- 商品信息 -->
			<view class="item-box pad-12">
				<!-- 正常商品 -->
				<view class="goods-list flex" v-for="(item, index) in goods" :key="index">
					<view class="goods-image">
						<qh-goods-image :src="item.goods_img" size="152" radius="12"></qh-goods-image>
						<view class="goods-dis-tag" v-if="showVipDiscount(item)"></view>
					</view>
					<view class="goods-right-box flex-col-spb">
						<view class="flex-spb-cn width-100">
							<view class="goods-name">
								<view class="text-ellipsis">{{item.goods_name}}</view>
							</view>
							<view class="goods-num">x{{item.num * 1}}</view>
						</view>
						<view class="goods-sku">{{item.sku_name}}</view>
						<!-- 商城零售价 -->
						<view class="goods-price flex-cn price-color" :class="{'crossed-price': originalPriceCrossed(item)}">￥{{item.online_price}}</view>
						<!-- plus会员价 -->
						<view class="goods-price flex-cn" :class="{'crossed-price': plusPriceCrossed(item)}"
							v-if="userInfo.user_type == 2 && item.plus_mem_status == 1 && item.plus_price">
							<text class="plus-price-color">￥{{item.plus_price * 1}}</text>
							<text class="plus-price-icon">PLUS</text>
							<text class="price-integral-text"
								v-if="merConf.marketing_methods == 2 && item.plus_mem_integral > 0">+{{item.plus_mem_integral}}{{integral_name}}</text>
						</view>
						<!-- 常规会员价 -->
						<view class="goods-price flex-cn" :class="{'crossed-price': vipPriceCrossed(item)}"
							v-else-if="userInfo.user_type != 1 && item.shop_mem_status == 1 && item.shop_mem_price">
							<text class="price-color">￥{{item.shop_mem_price * 1}}</text>
							<text class="vip-price-icon">VIP</text>
							<text class="price-integral-text"
								v-if="merConf.marketing_methods == 2 && item.shop_mem_integral > 0">+{{item.shop_mem_integral}}{{integral_name}}</text>
						</view>
					</view>
				</view>
				<!-- 失效商品 -->
				<view class="goods-list goods-invalid-box flex" v-for="(item, index) in invalidGoods" :key="index">
					<view class="goods-image">
						<qh-goods-image :src="item.goods_img" size="152" radius="12"></qh-goods-image>
						<view class="goods-dis-tag" v-if="showVipDiscount(item)"></view>
						<text class="goods-invalid-tip">{{item.invalid_cause}}</text>
					</view>
					<view class="goods-right-box flex-col-spb">
						<view class="flex-spb-cn width-100">
							<view class="goods-name">
								<view class="text-ellipsis">{{item.goods_name}}</view>
							</view>
							<view class="goods-num">x{{item.num * 1}}</view>
						</view>
						<view class="goods-sku">{{item.sku_name}}</view>
						<!-- 商城零售价 -->
						<view class="goods-price flex-cn" :class="{'crossed-price': originalPriceCrossed(item)}">￥{{item.online_price}}</view>
						<!-- plus会员价 -->
						<view class="plus-price flex-cn" :class="{'crossed-price': plusPriceCrossed(item)}"
							v-if="userInfo.user_type == 2 && item.plus_mem_status == 1 && item.plus_price">
							<text>￥{{item.plus_price * 1}}</text>
							<text class="plus-price-icon">PLUS</text>
							<text class="price-integral-text"
								v-if="merConf.marketing_methods == 2 && item.plus_mem_integral > 0">+{{item.plus_mem_integral}}{{integral_name}}</text>
						</view>
						<!-- 常规会员价 -->
						<view class="goods-price flex-cn" :class="{'crossed-price': vipPriceCrossed(item)}"
							v-else-if="userInfo.user_type != 1 && item.shop_mem_status == 1 && item.shop_mem_price">
							<text>￥{{item.shop_mem_price * 1}}</text>
							<text class="vip-price-icon">VIP</text>
							<text class="price-integral-text"
								v-if="merConf.marketing_methods == 2 && item.shop_mem_integral > 0">+{{item.shop_mem_integral}}{{integral_name}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 会员信息 -->
			<view class="item-box vip-box">
				<view class="vip-info-box flex" v-if="userInfo.user_type == 2 || userInfo.user_type == 3">
					<qh-user-head-img :src="userInfo.avatar" size="61"></qh-user-head-img>

					<view class="vip-right">
						<view class="vip-info-top flex-cn">
							<view class="vip-name-box flex-cn">
								<text class="text-ellipsis font500">{{userInfo.nickname ? userInfo.nickname : '未设置'}}</text>
								<text class="qh-rt-single qh-rt-a-zu4340 plus-vip-icon" v-if="userInfo.user_type == 2"></text>
								<text class="qh-rt-single qh-rt-a-zu4351 vip-icon" v-if="userInfo.user_type == 3"></text>
							</view>
						</view>
						<view class="flex-spb-cn mar-top-12">
							<text class="vip-info-text font-size-28">{{userInfo.card_num}}</text>
							<view class="flex-cn">
								<text class="vip-info-text" v-if="form.all_money > userInfo.balance">余额不足</text>
								<text class="vip-info-text primary" @click="toRecharge">去充值?</text>
							</view>
						</view>
						<view class="flex-cn mar-top-12">
							<text class="vip-info-text">余额:{{userInfo.balance}}</text>
							<text class="vip-info-text">{{integral_name}}:{{userInfo.integral}}</text>
							<text class="vip-info-text">{{userInfo.discount_describe}}折</text>
						</view>
					</view>
				</view>
				<view class="pad_lr_20">
					<view class="item-list coupon-box flex-spb-cn" :class="{'border-top': userInfo.user_type == 2 || userInfo.user_type == 3}">
						<view class="coupon-left flex-cn">
							<text class="qh-rt-single qh-rt-a-zu4328 coupon-icon"></text>
							<text class="font500">优惠券</text>
						</view>
						<view class="coupon-right flex-cn" @click="chooseCoupon">
							<text class="coupon-pl" v-if="!canUseCouponList.length">暂无优惠券可用</text>
							<text class="coupon-tips" v-else-if="!couponInfo">{{canUseCouponList.length}}张优惠券可用</text>
							<text class="primary" v-else>-￥{{couponInfo.reduce_money}}</text>
							<text class="qh-rt-single qh-rt-you right-icon"></text>
						</view>
					</view>
					<view v-if="userInfo.user_type != 1" class="item-list integral-box border-top flex-cn"
						:style="merConf.marketing_methods == 2 ? 'padding-bottom:10rpx' : ''">
						<text class="qh-rt-single qh-rt-a-zu4341 integral-icon"></text>
						<view class="integral-right">
							<view class="integral-right-top flex-spb-cn">
								<view class="integral-title font500">{{integral_name}}抵扣</view>
								<view class="integral-input-box flex-cn">
									<input v-if="merConf.marketing_methods == 1" v-model="form.integral_dis_num" type="number" :disabled="max_use_integral == 0"
										class="integral-input" @blur="calculateIntegral">
									<qh-radio v-model="form.is_integral_cash" padding="20" :disabled="merConf.marketing_methods == 1 && max_use_integral == 0"
										:activeValue="1" :inactiveValue="0" @change="calculateIntegral">
									</qh-radio>
								</view>
							</view>
							<view class="integral-text flex-spb-cn" v-if="merConf.marketing_methods == 1">
								<text>{{integral_name}}{{userInfo.integral}}，最多可以使用{{max_use_integral}}{{integral_name}}抵现{{max_integral_dis_money}}元</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 订单金额、优惠信息展示 -->
			<view class="item-box">
				<view class="item-list discount-box">
					<view class="flex-spb-cn">
						<text class="discount-title">订单金额</text>
						<text class="discount-info">￥{{originalPrice}}</text>
					</view>
					<view class="flex-spb-cn mar-top-16" v-if="vipPreferential > 0">
						<view class="discount-sub-title flex-cn">会员价优惠</view>
						<text class="discount-sub-value">-￥{{vipPreferential}}</text>
					</view>
					<view class="flex-spb-cn mar-top-16" v-if="vipDisMoney > 0">
						<view class="discount-sub-title flex-cn">
							<text>会员折扣优惠</text>
							<text class="primary">{{userInfo.discount_describe}}折</text>
						</view>
						<text class="discount-sub-value">-￥{{vipDisMoney}}</text>
					</view>
					<view class="flex-spb-cn mar-top-16" v-if="couponInfo">
						<view class="discount-sub-title flex-cn">
							<text>优惠券优惠</text>
							<text class="primary">满{{couponInfo.need_money}}减{{couponInfo.reduce_money}}元</text>
						</view>
						<text class="discount-sub-value">-￥{{couponInfo.reduce_money}}</text>
					</view>
					<view class="flex-spb-cn mar-top-16" v-if="form.is_integral_cash == 1 && merConf.marketing_methods == 1 && form.integral_dis_money > 0">
						<view class="discount-sub-title flex-cn">
							<text>{{integral_name}}抵现优惠</text>
							<text class="primary">{{form.integral_dis_num}}{{integral_name}}抵{{form.integral_dis_money}}元</text>
						</view>
						<text class="discount-sub-value">-￥{{form.integral_dis_money}}</text>
					</view>
					<template v-else-if="form.is_integral_cash == 1 && merConf.marketing_methods == 2">
						<view class="flex-spb-cn mar-top-16">
							<view class="discount-sub-title flex-cn">
								<text>{{integral_name}}抵扣</text>
							</view>
							<text class="discount-sub-value">-{{form.integral_dis_num}}{{integral_name}}</text>
						</view>
						<view class="flex-spb-cn mar-top-16" v-if="form.integral_dis_money > 0">
							<view class="discount-sub-title flex-cn">
								<text>购买{{integral_name}}</text>
							</view>
							<text class="discount-sub-value primary">+￥{{form.integral_dis_money}}</text>
						</view>
					</template>
					<view class="flex-spb-cn mar-top-16" v-if="form.pickup_type != 1 && form.delivery_fee > 0">
						<view class="discount-sub-title flex-cn">{{form.pickup_type == 2 ? '配送费' : '运费'}}</view>
						<view class="flex-cn">
							<text class="discount-sub-value"
								:class="{'primary': actual_delivery_fee != 0, 'crossed-value': actual_delivery_fee == 0}">{{actual_delivery_fee != 0 ? '+' : ''}}￥{{form.delivery_fee}}</text>
							<text class="discount-sub-value" v-if="actual_delivery_fee == 0">￥{{actual_delivery_fee}}</text>
						</view>
					</view>

					<view class="flex-spb-cn mar_t_20">
						<text class="discount-title font500">实际支付金额</text>
						<text class="discount-title font500">￥{{form.all_money}}</text>
					</view>
				</view>
			</view>
			<view class="item-box">
				<view class="item-list" style="padding-bottom: 24rpx;">
					<text class="item-value">给卖家留言</text>
				</view>
				<textarea v-model="form.remark" class="remark-textarea" placeholder="留言内容" maxlength="100" placeholder-class="textarea-pl"></textarea>
				<!-- #ifdef MP-WEIXIN -->
				<view class="textarea-count-tip">{{form.remark.length}}/100</view>
				<!-- #endif -->
			</view>
		</view>
		<view class="flex-column-100 flex-cn-cn" v-else>
			<qh-loading></qh-loading>
		</view>
		<!-- 底部按钮 -->
		<view class="footer-box flex-spb-cn" :style="footerStyle">
			<view class="footer-left flex-row-100 flex-col-end-cn">
				<view class="flex-spe-cn">
					<view class="flex-cn">
						<view class="footer-text">
							<text>优惠:</text>
							<text class="price">￥</text>
						</view>
						<text class="footer-price">{{allPreferential}}</text>
					</view>
					<view class="flex-cn mar_l_40">
						<view class="footer-text">
							<text>实付:</text>
							<text class="price">￥</text>
						</view>
						<text class="footer-price">{{form.all_money}}</text>
					</view>
				</view>
				<view class="flex-end-spb width-100" v-show="form.pickup_type == 2 || form.pickup_type == 3">
					<view class="starting-tip">￥{{storeSet.starting_price}}起送</view>
					<view v-if="delivery_status == 1" class="delivery-cost">单笔消费满{{delivery_cost}}元免运费</view>
				</view>
			</view>
			<view class="footer-btn" :class="{'disabled': !canSubmit}" @click="submitVerify">提交订单</view>
		</view>
	</qh-page-view>
</template>

<script>
	const app = getApp().globalData;
	import toDecimal from "@/utils/toDecimal.js";

	export default {
		data() {
			return {
				pageLoaded: false,
				pickup_list: [{
						name: '门店自提',
						value: 1
					},
					{
						name: '同城配送',
						value: 2
					},
					{
						name: '门店发货',
						value: 3
					},
				],
				isChooseStore: false, //是否正在选择门店
				store: {},
				isChooseAddress: false, //是否正在选择收货地址
				address: {},
				storeSet: {
					starting_price: 0,
				},
				range: {
					distance: 0
				},
				userInfo: {
					user_type: 1,
					discount: 1,
					discount_describe: 10,
				}, //用户信息
				goods: [], //可下单的商品列表
				invalidGoods: [], //失效的商品列表
				canUseCouponList: [], //可用券列表
				couponInfo: null, //已选优惠券列表
				isChooseCoupon: false, //是否正在选择优惠券
				isToRecharge: false, //是否去充值
				merConf: {
					integral_arrive_cash: '1',
					integral_arrive_cash_data: '1',
					integral_arrive_cash_price: '0.10',
					integral_arrive_cash_rate: '0.2000',
					marketing_methods: '1', //1基于订单  2基于商品
				}, //商户积分使用设置
				originalPrice: 0, //订单原价的总价
				vipPreferential: 0, //会员价优惠金额（仅在积分基于订单时有效）
				vipDisMoney: 0, //会员折扣优惠金额
				max_use_integral: 0, //最多可使用的积分
				max_integral_dis_money: 0, //积分最多可抵扣的金额
				difference_integral: 0, //不足积分差值（仅针对基于商品）
				delivery_status: 0, //门店是否开启满多少面配送费的功能  1开启 0关闭
				delivery_cost: 0, //免配送费的门槛
				actual_delivery_fee: 0, //实际的总配送费

				choose_pickup_date: '', //选择的自提时间
				choose_send_date: '', //选择的发货时间

				canSubmit: false, //是否可以提交
				submitErrorMessage: '', //不可以提交的错误原因

				form: {
					address_id: '', //收货地址id
					pickup_type: '', //配送方式 1自提 2配送  3快递
					coupon_id: '', //优惠券id
					coupon_type: '', //优惠券类型
					shopping_ids: '', //购物车id
					mobile_phone: '', //自提联系电话
					link_name: '', //自提联系人姓名
					delivery_fee: 0, //配送费
					remark: '', //用户留言
					all_money: 0, //前台传过来的 最后价格
					start_date: '', //配送或者自提时间
					is_integral_cash: 0, //是否启用积分抵现1启用 0不启用
					integral_dis_money: 0, //分抵扣的金额或者抵扣积分的金额
					integral_dis_num: 0, //使用的积分数量
					effective_shopping_ids: '', //有效商品的购物车id
					// order_source_type: 1, //订单来源 1商户页 2门店页
				},
				integral_name:''
			}
		},
		computed: {
			footerStyle() {
				return 'height:' + (this.$store.bottomHeight + 124) + 'rpx;padding-bottom:' + this.$store.bottomHeight + 'rpx;';
			},
			allPreferential() {
				let money = this.vipPreferential + this.vipDisMoney; //会员价优惠+会员折扣优惠
				if (this.couponInfo) {
					money += this.couponInfo.reduce_money; //加优惠券
				}
				if (this.merConf.marketing_methods == 1 && this.form.is_integral_cash) {
					money += this.form.integral_dis_money; //积分抵现
				}
				return toDecimal(money);
			},
		},
		async onLoad(options) {
			await this.$onLaunched;
			this.integral_name = this.$store.integral_name;
			this.form.shopping_ids = options.ids;

			//获取最近的门店信息
			const store = await this.getNearestStore();
			if (!store) return;

			this.initData();
		},
		async onShow() {
			
			//处理选择门店
			if (this.isChooseStore) {
				let store = uni.getStorageSync('settlementStore');
				if (store && store.store_id != this.store.store_id) {
					this.store = store;
					this.initData();
				}
				this.isChooseStore = false;
			}

			//处理选择收货地址
			if (this.isChooseAddress) {
				let address = uni.getStorageSync('shoppingAddress');
				if (address && address.id != this.address.id) {
					this.address = address;
					await this.getDeliveryFee();
					await this.calculatePayPrice();
				}
				this.isChooseAddress = false;
			}

			//处理选择优惠券
			if (this.isChooseCoupon) {
				let coupon = uni.getStorageSync('useCoupon');
				if (!coupon || coupon && !this.couponInfo || coupon && this.couponInfo && coupon.id != this.couponInfo.id) {
					if (coupon) {
						coupon.need_money = coupon.need_money * 1;
						coupon.reduce_money = coupon.reduce_money * 1;
					}
					this.couponInfo = coupon ? coupon : null;
					await this.calculateMaxIntegral(this.form.is_integral_cash == 1);
					if (this.userInfo.user_type != 1) {
						this.calculateIntegral();
					} else {
						this.calculatePayPrice();
					}
				}
				this.isChooseCoupon = false;
			}

			//处理去充值后回显
			if (this.isToRecharge) {
				await this.getVipInfo(); //刷新会员信息
				await this.getCoupon(); //刷新优惠券
				await this.calculateMaxIntegral(this.form.is_integral_cash == 1); //重新计算积分
				await this.calculatePayPrice(); //重新计算订单金额

				this.isToRecharge = false;
			}
		},
		methods: {
			//选择收货地址
			toAddress() {
				this.isChooseAddress = true;
				uni.navigateTo({
					url: '/pages/mine/MyAddress/MyAddress?type=1'
				})
			},
			//选择门店
			toStore() {
				uni.removeStorageSync('settlementStore');
				this.isChooseStore = true;
				uni.navigateTo({
					url: '/pages/mer/chooseStore/chooseStore'
				})
			},
			//处理收货地址的手机号展示
			handlePhone(phone) {
				return phone.substring(0, 3) + '****' + phone.substring(7);
			},
			//去充值
			toRecharge() {
				this.isToRecharge = true;
				uni.navigateTo({
					url: '/pages/mine/recharge/recharge?scene=1'
				})
			},
			//获取会员信息
			async getVipInfo() {
				if (this.$store.userInfo.type == 1) return this.vipDiscount = 1;
				const {
					status,
					data,
					message
				} = await this.$request('SmallProgramApi/Vip/getVipDetails', false);
				if (status == 1) {
					data.balance = toDecimal(data.balance * 1);
					data.integral = toDecimal(data.integral * 1);
					data.discount = toDecimal(data.discount * 1);
					data.discount_describe = toDecimal(data.discount * 10);
					this.userInfo = data;
				} else {
					this.userInfo.user_type = 1;
					uni.showToast({
						title: message,
						icon: 'none',
					})
				}
			},
			//选择优惠券
			chooseCoupon() {
				if (!this.goods.length) return uni.showToast({
					title: '没有可下单的商品',
					icon: 'none'
				})
				let arr = [
					'store_id=' + this.store.store_id,
					'money=' + toDecimal(this.originalPrice - this.vipDisMoney - this.vipPreferential),
					'is_integral_cash=' + this.form.is_integral_cash,
					'shopping_ids=' + this.form.shopping_ids,
					'order_source_type=' + 1,
					'scene_type=' + 1,
				];
				uni.setStorageSync('useCoupon', this.couponInfo);
				this.$nextTick(() => {
					this.isChooseCoupon = true;
					uni.navigateTo({
						url: '/pages/index/useCoupon/useCoupon?money=' + toDecimal(this.originalPrice - this.vipDisMoney - this.vipPreferential) + "&shopping_ids=" + this.form.shopping_ids + "&is_integral_cash=" +
							this.form.is_integral_cash + '&scene_type=1'
					});
					// uni.navigateTo({
					// 	url: '/pages/order/directPay/chooseCoupon' + '?' + arr.join('&')
					// });
				})
			},
			//判断是否显示折扣角标
			showVipDiscount(item) {
				if (item.vip_online_state != 1 || this.userInfo.user_type == 1 || this.userInfo.discount == 1) {
					//普通用户、等级不打折、商品未开启打折
					return false;
				}
				if (this.userInfo.user_type == 2 && item.plus_mem_status == 1 && item.plus_price &&
					(this.merConf.marketing_methods != 2 || this.merConf.marketing_methods == 2 && item.plus_mem_integral && !this.form.is_integral_cash)) {
					//plus会员使用plus会员价 && (积分不基于商品、积分基于商品设置了积分且使用积分抵扣)
					return false;
				}
				return true;
			},
			//判断原价是否为划线价
			originalPriceCrossed(item) {
				if (this.userInfo.user_type == 2 && item.plus_mem_status == 1 && item.plus_price && (this.merConf.marketing_methods != 2 ||
						!item.plus_mem_integral || this.merConf.marketing_methods == 2 && this.form.is_integral_cash)) {
					return true;
				} else if (this.userInfo.user_type != 1 && item.shop_mem_status == 1 && item.shop_mem_price && (this.merConf.marketing_methods != 2 ||
						!item.shop_mem_integral || this.merConf.marketing_methods == 2 && this.form.is_integral_cash)) {
					return true;
				}

				return false;
			},
			//判断plus会员价是否为划线价
			plusPriceCrossed(item) {
				return this.merConf.marketing_methods == 2 && item.plus_mem_integral > 0 && !this.form.is_integral_cash;
			},
			//判断常规会员价是否为划线价
			vipPriceCrossed(item) {
				return this.merConf.marketing_methods == 2 && item.shop_mem_integral > 0 && !this.form.is_integral_cash;
			},
			//数据初始化
			async initData() {
				uni.$emit('showLoading');
				this.pageLoaded = false;
				this.integral_name = this.$store.integral_name;
				//获取商品详情
				const goods = await this.getGoodsInfo();
				if (!goods) return;

				if ((this.form.pickup_type == 2 || this.form.pickup_type == 3) && this.address.id) {
					await this.getDeliveryFee();
				}

				//计算最多使用的积分
				await this.calculateMaxIntegral();

				//设置使用的积分
				if (this.userInfo.user_type != 1) {
					this.calculateIntegral();
				} else {
					this.calculatePayPrice();
				}
				this.pageLoaded = true;
				uni.$emit('hideLoading');
			},
			//获取最优惠的优惠券
			getCoupon() {
				return new Promise(async resolve => {
					const {
						status,
						data,
						message
					} = await this.$request('SmallProgramApi/Coupon/getBuyGoodsWholeUsableCouponList', {
						store_id: this.store.store_id,
						money: toDecimal(this.originalPrice - this.vipDisMoney - this.vipPreferential),
						is_integral_cash: this.form.is_integral_cash,
						shopping_ids: this.form.shopping_ids,
						// order_source_type: 1,
						scene_type: 1,
					}, false);
					if (status == 1 && data.length) {
						this.canUseCouponList = data;
						data[0].need_money = data[0].need_money * 1;
						data[0].reduce_money = data[0].reduce_money * 1;
						this.couponInfo = data[0];
					} else {
						this.canUseCouponList = [];
						this.couponInfo = null;
					}
					resolve();
				})
			},
			//计算最多能使用的积分和最多能抵扣的金额
			calculateMaxIntegral(bool = true) {
				return new Promise(resolve => {
					let conf = this.merConf;
					let max_integral_dis_money = 0; //最大使用积分能抵扣的金额（仅针对基于订单）、需要抵扣不足积分的金额（仅针对基于商品）

					let max_use_integral = 0; //最大使用积分

					let difference_integral = 0; //不足积分差值（仅针对基于商品）

					if (conf && conf.integral_arrive_cash == 1 && this.userInfo.user_type != 1) {
						if (conf.marketing_methods == 1) {
							//基于订单
							let money = toDecimal(this.originalPrice - this.vipPreferential - this.vipDisMoney); //原总价-会员价优惠金额-会员折扣优惠金额
							//减掉优惠券金额
							if (this.couponInfo && this.couponInfo.reduce_money) {
								money = toDecimal(money - this.couponInfo.reduce_money);
							}
							max_integral_dis_money = toDecimal(conf.integral_arrive_cash_rate * money);
							max_use_integral = Math.round(conf.integral_arrive_cash_data * max_integral_dis_money / conf.integral_arrive_cash_price);
							console.log('max_use_integral', max_use_integral)
							if (this.userInfo.integral < max_use_integral) {
								max_use_integral = this.userInfo.integral;
								max_integral_dis_money = toDecimal(max_use_integral * conf.integral_arrive_cash_price / conf.integral_arrive_cash_data);
							}
							if (max_use_integral == 0) {
								max_integral_dis_money = 0;
							}
						} else {
							//基于商品
							let goods = this.goods;

							for (let i = 0; i < goods.length; i++) {
								if (this.userInfo.user_type == 2 && goods[i].plus_mem_status == 1 && goods[i].plus_price) {
									if (goods[i].plus_mem_integral * 1 > 0) {
										max_use_integral += goods[i].plus_mem_integral * goods[i].num;
									}
								} else if (goods[i].shop_mem_status == 1 && goods[i].shop_mem_price && goods[i].shop_mem_integral * 1 > 0) {
									max_use_integral += goods[i].shop_mem_integral * goods[i].num;
								}
							}
							max_use_integral = toDecimal(max_use_integral);

							if (this.userInfo.integral < max_use_integral) {
								difference_integral = toDecimal(max_use_integral - this.userInfo.integral);
								max_use_integral = this.userInfo.integral;
								max_integral_dis_money = toDecimal(difference_integral * conf.integral_arrive_cash_price / conf.integral_arrive_cash_data);
							}
						}
					}
					this.max_use_integral = max_use_integral;
					this.max_integral_dis_money = max_integral_dis_money;
					this.difference_integral = difference_integral;

					this.form.integral_dis_num = max_use_integral;
					this.form.integral_dis_money = max_integral_dis_money;
					this.form.is_integral_cash = bool && this.userInfo.user_type != 1 && (max_use_integral > 0 || difference_integral > 0) ? 1 : 0;

					resolve();
				})
			},
			//计算实际使用的积分抵扣金额
			async calculateIntegral() {
				if (this.merConf.marketing_methods == 1 && this.merConf.integral_arrive_cash == 1) {
					if (this.form.integral_dis_num > this.max_use_integral) {
						this.form.integral_dis_num = this.max_use_integral;
					}
					if (this.form.integral_dis_num == this.max_use_integral) {
						this.form.integral_dis_money = this.max_integral_dis_money;
					} else {
						let money = toDecimal(this.form.integral_dis_num * this.merConf.integral_arrive_cash_price / this.merConf.integral_arrive_cash_data);

						this.form.integral_dis_money = money;
					}
				}
				await this.calculatePayPrice();
			},
			//计算订单总额
			calculatePayPrice() {
				return new Promise(resolve => {
					let payMoney = 0; //需要支付的金额
					let original_price = 0;
					let vip_preferential = 0; //会员价优惠金额（仅在积分基于订单时有效）
					let vip_dis_money = 0; //会员折扣优惠金额

					let coupon_state = false; //判断是否需要重新获取优惠券

					//商品金额计算
					this.goods.forEach((goods) => {
						let price = goods.online_price;
						let discount = 1;

						if (this.userInfo.user_type == 2 && goods.plus_mem_status == 1 && goods.plus_price &&
							(this.merConf.marketing_methods == 1 || this.merConf.marketing_methods == 2 && this.form.is_integral_cash == 1 ||
								!goods.plus_mem_integral)) {
							//plus会员价
							price = goods.plus_price;
						} else if (this.userInfo.user_type != 1 && goods.shop_mem_status == 1 && goods.shop_mem_price &&
							(this.merConf.marketing_methods == 1 || this.merConf.marketing_methods == 2 && this.form.is_integral_cash == 1 ||
								!goods.shop_mem_integral)) {
							//常规会员价
							price = goods.shop_mem_price;
							if (goods.vip_online_state == 1) {
								discount = this.userInfo.discount;
							}
						} else if (this.userInfo.user_type != 1 && goods.vip_online_state == 1) {
							//普通零售价
							discount = this.userInfo.discount;
						}
						let original = toDecimal(goods.online_price * goods.num); //原价总和
						original_price = toDecimal(original_price + original); //原价累加
						let pay_money = toDecimal(price * goods.num); //优惠后总价

						//计算会员价优惠金额
						vip_preferential = toDecimal(vip_preferential + toDecimal(original - pay_money));

						//计算打折金额
						if (discount < 1) {
							price = toDecimal(price * discount);
						}
						payMoney = toDecimal(payMoney + toDecimal(price * goods.num)); //打折后总价
					})

					//打折优惠金额
					vip_dis_money = toDecimal(original_price - toDecimal(vip_preferential + payMoney));

					//金额发生变动、获取优惠券
					if (payMoney != toDecimal(this.originalPrice - toDecimal(this.vipDisMoney + this.vipPreferential))) {
						coupon_state = true;
					}

					//减优惠券
					if (this.couponInfo) {
						payMoney = toDecimal(payMoney - this.couponInfo.reduce_money);
					}

					//处理积分金额
					if (this.form.is_integral_cash == 1) {
						if (this.merConf.marketing_methods == 1) {
							//减基于订单的积分抵扣金额
							payMoney = toDecimal(payMoney - this.form.integral_dis_money);
						} else if (this.difference_integral > 0) {
							//加基于商品的需要不足使用积分的金额
							payMoney = toDecimal(payMoney + this.form.integral_dis_money);
						}
					}

					let canSubmit = true;

					//判断起送价
					let starting_state = toDecimal(this.storeSet.starting_price - payMoney);
					if ((this.form.pickup_type == 2 || this.form.pickup_type == 3) && this.storeSet.starting_price && this.storeSet.starting_price >
						payMoney) {
						canSubmit = false;
						this.submitErrorMessage = '未达到门店起送价￥' + this.storeSet.starting_price;
					}

					//加配送费
					if (this.form.pickup_type == 2 || this.form.pickup_type == 3) {
						//商家配送、快递发货
						let deliveryMoney = toDecimal(original_price - toDecimal(vip_preferential + vip_dis_money)); //是否达到免运费金额，免运费规则刨除优惠券金额+积分抵扣金额

						if (this.merConf.marketing_methods == 2 && this.form.is_integral_cash) {
							deliveryMoney = toDecimal(deliveryMoney + this.form.integral_dis_money); //金额抵积分花费的金额
						}
						if (this.delivery_status == 1 && deliveryMoney >= this.delivery_cost) {
							//免运费
							this.actual_delivery_fee = 0;
						} else {
							this.actual_delivery_fee = this.form.delivery_fee;
						}
						payMoney = toDecimal(payMoney + this.actual_delivery_fee);
					} else {
						this.actual_delivery_fee = 0;
					}

					//判断收货地址
					if (canSubmit && (this.form.pickup_type == 2 || this.form.pickup_type == 3) && !this.address.id) {
						canSubmit = false;
						this.submitErrorMessage = '请选择收货地址';
					}

					//赋值
					this.form.all_money = payMoney;
					this.originalPrice = original_price;
					this.vipPreferential = vip_preferential;
					this.vipDisMoney = vip_dis_money;
					this.canSubmit = canSubmit;

					coupon_state && this.getCoupon();

					resolve()
				})
			},
			//获取最近的门店
			getNearestStore() {
				return new Promise(async resolve => {
					const location = await this.$mutations.getLocation();
					if (!location) {
						uni.showModal({
							title: '温馨提示',
							content: '未获取到您的位置，您无法下单',
							showCancel: false,
							success: (res) => {
								if (res.confirm) {
									uni.navigateBack({
										delta: 1
									})
								}
							}
						})
						return resolve(false)
					}
					const {
						status,
						data,
						message
					} = await this.$request('SmallProgramApi/Store/getRecentlyStoreInfo', {
						longitude: location.longitude,
						latitude: location.latitude,
					}, false);

					if (status != 1) {
						uni.showToast({
							title: message,
							icon: "none"
						})
						return resolve(false)
					}
					this.store = data;
					resolve(true);
				})
			},
			//切换配送方式
			async changePickup(val) {
				if (!this.goods.length) return;
				if (val == 2 || val == 3) {
					await this.getDeliveryFee();
				}
				await this.calculatePayPrice();
			},
			//获取配送费
			getDeliveryFee() {
				return new Promise(async resolve => {
					if (!this.address.id || !this.goods.length) {
						this.form.delivery_fee = 0;
						return resolve(false);
					}

					const res = await this.$request('SmallProgramApi/Address/range_v2', {
						address_id: this.address.id,
						order_genre: 1, //普通订单
						shopping_ids: this.form.effective_shopping_ids,
						pickup_type: this.form.pickup_type,
						store_id: this.store.store_id,
						// order_source_type: 1,
					}, false);
					if (res.status == 1) {
						this.form.delivery_fee = res.fee * 1;
						this.range.distance = this.form.pickup_type == 2 ? res.distance : 0;
					} else {
						uni.showToast({
							title: res.msg ? ('地址: ' + res.msg) : '收货地址不在配送范围内',
							icon: 'none',
							duration: 1500,
							mask: false
						});
						this.canSubmit = false;
						this.submitErrorMessage = res.msg;
						this.form.delivery_fee = 0;
						this.range.distance = res.distance ? res.distance : 0;
					}
					resolve(true);
				})
			},
			//验证订单是否能提交
			submitVerify() {
				if (!this.goods.length) return uni.showModal({
					title: '温馨提示',
					content: '暂无有效的商品可下单',
					showCancel: false
				})
				if (!this.canSubmit) return uni.showModal({
					title: '温馨提示',
					content: this.submitErrorMessage,
					showCancel: false
				})

				//未开启非营业时间下单、判断时间
				if (this.storeSet.business_non_order == 2) {
					//选取配送时间的开始时刻和结束时刻
					let start = this.storeSet.new_business_time[0][0];
					let end = this.storeSet.new_business_time[this.storeSet.new_business_time.length - 1][1];
					let checktime = start + '-' + end;
					if (!app.checkTime(checktime)) return uni.showModal({
						title: '提示',
						content: '当前时间不在今日营业时间范围内',
						showCancel: false
					});
				}
				if (this.form.pickup_type == 2 && !this.choose_send_date) {
					return uni.showToast({
						title: '请选择起送时间',
						icon: 'none',
						duration: 1000,
						mask: false
					});
				} else if (this.form.pickup_type == 1 && !this.choose_pickup_date) {
					return uni.showToast({
						title: '请选择自提时间',
						icon: 'none',
						duration: 1000,
						mask: false
					});
				} else if (!this.form.pickup_type) {
					return uni.showToast({
						title: '此门店暂不支持下单，请更换门店',
						icon: 'none',
						duration: 2000,
						mask: false
					});
				}

				if (this.form.pickup_type == 1) {
					if (!this.form.link_name || !this.form.link_name.length || !this.form.link_name.trim().length) return uni.showToast({
						title: '请填写姓名',
						icon: 'none',
						duration: 800,
						mask: true
					});

					if (!this.form.mobile_phone.match(/^1[3456789]\d{9}$/)) return uni.showToast({
						title: '请完善手机号',
						icon: 'none',
						duration: 800,
						mask: true
					});
				}

				if (this.form.is_integral_cash == 1 && this.merConf.marketing_methods == 2 && this.difference_integral > 0) {
					let integral = this.merConf.integral_arrive_cash_data;
					let price = this.merConf.integral_arrive_cash_price * 1;
					let money = this.form.integral_dis_money;
					uni.showModal({
						title: this.integral_name+'不足提示',
						content: `您剩余${this.integral_name}的不足，还差${this.difference_integral}${this.integral_name}，是否确定花费${money}元购买${this.integral_name}（${price}元=${integral}${this.integral_name}），放弃则使用商城原价计算订单金额`,
						cancelColor: '#999',
						cancelText: '放弃',
						confirmText: '确定',
						showCancel: true,
						success: async res => {
							if (res.confirm) {
								this.submitOrder();
							} else {
								this.form.is_integral_cash = 0;
								await this.getCoupon();
								await this.calculatePayPrice();
								this.submitOrder();
							}
						}
					});
				} else {
					this.submitOrder();
				}
			},
			//提交订单
			async submitOrder() {
				this.canSubmit = false;

				this.form.store_id = this.store.store_id;
				this.form.address_id = this.form.pickup_type != 1 ? this.address.id : '';
				this.form.coupon_id = this.couponInfo ? this.couponInfo.id : '';
				this.form.coupon_type = this.couponInfo ? this.couponInfo.coupon_choice_type : '';
				this.form.start_date = this.form.pickup_type == 2 ? this.choose_send_date : (this.form.pickup_type == 1 ? this.choose_pickup_date : '');

				if (this.form.start_date) {
					this.form.start_date = this.form.start_date.replace("月", "-");
					this.form.start_date = this.form.start_date.replace("日", " ");
					this.form.start_date = new Date().getFullYear() + "-" + this.form.start_date + ":00";
				}
				const {
					status,
					data,
					message
				} = await this.$request('SmallProgramApi/Pay/placeOrder_v7', this.form);

				if (status != 1) {
					this.canSubmit = true;
					return uni.showModal({
						title: '错误提示',
						content: message,
						showCancel: false,
					})
				}
				uni.redirectTo({
					url: '/pages/order/waitPay/waitPay?order_no=' + data.order_no + '&money=' + data.allMoney
				});
			},
			//获取支付基本数据
			getGoodsInfo() {
				return new Promise(async resolve => {
					const {
						status,
						data,
						message
					} = await this.$request('SmallProgramApi/Pay/getPayInfo_v5', {
						id: this.form.shopping_ids,
						// order_source_type: 1,
						store_id: this.store.store_id,
					}, false);
					if (status != 1) {
						uni.showToast({
							title: message,
							icon: "none"
						})
						return resolve(false);
					}
					this.vipPreferential = 0;
					this.originalPrice = data.beforeMoney;
					this.vipDisMoney = data.dis_money;

					this.goods = data.goods;
					let effective_shopping_ids = data.goods.length ? data.goods.map(item => item.id) : [];
					this.form.effective_shopping_ids = JSON.stringify(effective_shopping_ids);

					this.invalidGoods = data.invalid_goods;
					data.storeSet.service_radius = toDecimal(data.storeSet.service_radius / 1000, 3);
					if (data.storeSet.starting_price) {
						data.storeSet.starting_price = data.storeSet.starting_price * 1;
					}
					this.storeSet = data.storeSet;

					data.merchantConfig.marketing_methods = data.merchantConfig.integral_arrive_cash == 1 ? data.merchantConfig.marketing_methods : 0;
					this.merConf = data.merchantConfig;

					if (data.address && !this.address.id) {
						this.address = data.address;
					}

					this.form.link_name = data.link_name;
					this.form.mobile_phone = data.mobile_phone;
					this.delivery_cost = data.delivery_cost ? (data.delivery_cost * 1) : 0;
					this.delivery_status = data.delivery_status;

					this.delivery_set = data.delivery_set;

					if (data.vip_data) {
						data.vip_data.balance = toDecimal(data.vip_data.balance * 1);
						data.vip_data.integral = toDecimal(data.vip_data.integral * 1);
						data.vip_data.discount = toDecimal(data.vip_data.discount * 1);
						data.vip_data.discount_describe = toDecimal(data.vip_data.discount * 10);
						this.userInfo = data.vip_data;
					} else {
						this.userInfo.user_type = 1;
					}

					//处理配送方式的顺序
					let pickup_list = [{
							name: '门店发货',
							id: 3
						},
						{
							name: '同城配送',
							id: 2
						}, {
							name: '门店自提',
							id: 1
						},
					];
					if (data.distribution_json) {
						pickup_list = JSON.parse(data.distribution_json)
					}
					let hasOldType = false;
					pickup_list = pickup_list.filter(item => {
						item.name == '自提' && (item.name = '门店自提');
						item.name == '快递配送' && (item.name = '门店发货');
						if (this.form.pickup_type && this.form.pickup_type == item.id && data.delivery_set[item.id - 1] > 0) {
							hasOldType = true;
						}
						return (data.delivery_set[item.id - 1] > 0)
					})

					this.pickup_list = pickup_list;

					if (pickup_list.length) {
						if (!this.form.pickup_type || !hasOldType) {
							this.form.pickup_type = pickup_list[0].id;
						}
					} else {
						this.form.pickup_type == '';
					}


					this.form.is_integral_cash = this.userInfo.user_type == 1 ? 0 : this.form.is_integral_cash;

					await this.getCoupon();

					resolve(true);
				})
			},
		},
	}
</script>

<style lang="scss">
	.pad-20 {
		padding: 20rpx;
	}

	.pad-12 {
		padding: 12rpx;
	}

	.settlement-box {
		overflow-y: auto;
	}

	.settlement-tab-box {
		margin: 20rpx;
		padding: 0;

		.item-box {
			margin: 0;
			border-top-left-radius: 0;
			border-top-right-radius: 0;
		}
	}

	.item-box {
		margin: 0 20rpx 20rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		background-color: #FFFFFF;
		border-radius: 12rpx;
		position: relative;



		.store-box {
			.store-name {
				font-size: 32rpx;
				line-height: 48rpx;
				font-weight: 500;
			}

			.store-distance {
				font-size: 28rpx;
				line-height: 44rpx;
				color: #999999;
				margin-left: 20rpx;

				.position-icon {
					font-size: 28rpx;
					margin-right: 8rpx;
				}
			}

			.store-address,
			.store-business {
				font-size: 28rpx;
				line-height: 42rpx;
				color: #999999;
				margin-top: 4rpx;
			}
		}

		.address-box {
			.position-icon {
				font-size: 32rpx;
				margin-right: 6rpx;
			}

			.user-address {
				font-size: 32rpx;
				line-height: 48rpx;
				color: #333333;
				font-weight: 500;
				flex: 1;
				overflow: hidden;
			}

			.user-info {
				font-size: 28rpx;
				color: #999999;
				line-height: 44rpx;
			}

			.store-name {
				font-size: 26rpx;
				color: #999999;
				line-height: 42rpx;
				margin-top: 4rpx;
				flex: 1;
				overflow: hidden;

				.store-icon {
					font-size: 28rpx;
					margin-right: 6rpx;
				}
			}
		}

		.address-empty {
			margin: 30rpx 88rpx;
			height: 82rpx;
			border-radius: 8rpx;
			border: 3rpx dashed #CCCCCC;
			font-size: 30rpx;
			color: #666666;
			line-height: 36rpx;
		}

		.item-list {
			padding-top: 26rpx;
			padding-bottom: 26rpx;

			.item-value {
				font-size: 30rpx;
				line-height: 42rpx;
				color: #333333;

				&.item-sub-value {
					color: #666666;
				}
			}

			.actual-delivery-fee {
				font-size: 24rpx;
				color: #999999;
				line-height: 42rpx;
				position: relative;
				margin-right: 10rpx;

				&::before {
					content: "";
					position: absolute;
					top: 0;
					left: -4rpx;
					bottom: 0;
					right: 0;
					margin: auto;
					width: calc(100% + 8rpx);
					height: 2rpx;
					background-color: #999999;
					margin-top: auto;
					margin-right: auto;
					margin-bottom: auto;
					margin-left: auto;
				}
			}

			.delivery-tip {
				font-size: 24rpx;
				color: #F2B525;
				line-height: 40rpx;
			}

			.item-input {
				width: 300rpx;
				text-align: right;
			}

			&.integral-box {
				padding: 10rpx 0 20rpx;

				.integral-icon {
					font-size: 40rpx;
					color: #FCA315;
					margin-left: 10rpx;
				}

				.integral-right {
					flex: 1;
					overflow: hidden;
					margin-left: 30rpx;
					margin-right: -20rpx;

					.integral-right-top {

						.integral-title {
							font-size: 30rpx;
							color: #1E1E1E;
							line-height: 38rpx;
						}

						.integral-input-box {
							.integral-input {
								width: 124rpx;
								height: 52rpx;
								border-radius: 8rpx;
								background-color: #F2F3F5;
								font-size: 28rpx;
								line-height: 36rpx;
								color: #1E1E1E;
								text-align: center;
							}
						}
					}

					.integral-text {
						font-size: 26rpx;
						line-height: 34rpx;
						color: #929397;
						margin-top: 6rpx;
					}
				}
			}

			&.discount-box {
				.discount-title {
					font-size: 30rpx;
					line-height: 38rpx;
					color: #1E1E1E;
				}

				.discount-info {
					font-size: 30rpx;
					line-height: 38rpx;
					color: #666666;
				}

				.discount-sub-title {
					font-size: 28rpx;
					line-height: 44rpx;
					color: #929397;

					.primary {
						margin-left: 20rpx;
					}
				}

				.discount-sub-value {
					font-size: 28rpx;
					line-height: 44rpx;
					color: #666666;

					&.crossed-value {
						color: #999999;
						position: relative;
						margin-right: 10rpx;

						&::before {
							content: "";
							position: absolute;
							top: 0;
							left: -4rpx;
							bottom: 0;
							right: 0;
							margin: auto;
							width: calc(100% + 8rpx);
							height: 2rpx;
							background-color: #999999;
							margin-top: auto;
							margin-right: auto;
							margin-bottom: auto;
							margin-left: auto;
						}
					}
				}
			}
		}

		.goods-list {
			padding: 20rpx 0;
			position: relative;

			&.goods-invalid-box {
				opacity: 0.6;

				.goods-invalid-tip {
					font-size: 22rpx;
					color: #FFFFFF;
					line-height: 42rpx;
					padding: 0 16rpx;
					background-color: rgba(0, 0, 0, 0.95);
					border-radius: 22rpx;
					position: absolute;
					top: 56rpx;
					left: 16rpx;
				}
			}

			.goods-image {
				position: relative;
				background-color: #F6F6F6;
				border-radius: 12rpx;
				width: 152rpx;
				height: 152rpx;

				.goods-dis-tag {
					border-top: 32rpx solid #FF3D3D;
					border-right: 32rpx solid #FF3D3D;
					border-top-right-radius: 12rpx;
					position: absolute;
					top: 0;
					right: 0;
					border-left: 32rpx solid transparent;
					border-bottom: 32rpx solid transparent;

					&::after {
						content: "折";
						font-size: 24rpx;
						line-height: 12px;
						color: #FFFFFF;
						position: absolute;
						top: -24rpx;
						right: -28rpx;
						width: 32rpx;
						height: 24rpx;
						text-align: center;
					}
				}
			}

			.goods-right-box {
				flex: 1;
				min-height: 152rpx;
				padding: 6rpx 0 12rpx 28rpx;
				overflow: hidden;
				align-items: flex-start;

				.goods-name {
					flex: 1;
					font-size: 28rpx;
					color: #333333;
					line-height: 36rpx;
					overflow: hidden;
				}

				.goods-sku,
				.goods-num {
					font-size: 26rpx;
					line-height: 42rpx;
					margin-top: 4rpx;
				}

				.goods-sku {
					color: #666666;
				}

				.goods-num {
					color: #999999;
					margin-left: 20rpx;
				}

				.goods-price {
					font-weight: 500;
					font-size: 28rpx;
					line-height: 44rpx;
					margin-top: 4rpx;
				}

				.price-discount {
					padding: 0 8rpx;
					border-radius: 4rpx;
					font-size: 20rpx;
					line-height: 28rpx;
					color: #FFFFFF;
					background-color: var(--primary-color);
					margin-left: 16rpx;
				}

				.price-integral-text {
					font-size: 28rpx;
					line-height: 44rpx;
					color: #666666;
					margin-left: 12rpx;
				}

				.crossed-price {
					font-size: 26rpx;
					line-height: 42rpx;
					color: #999999;
					margin-top: 4rpx;
					position: relative;
					display: inline-flex;
					// text-decoration: line-through;

					&::before {
						content: "";
						position: absolute;
						top: 0;
						left: -4rpx;
						bottom: 0;
						right: 0;
						margin: auto;
						width: calc(100% + 8rpx);
						height: 2rpx;
						background-color: #999999;
						margin-top: auto;
						margin-right: auto;
						margin-bottom: auto;
						margin-left: auto;
					}

					.vip-price-icon,
					.plus-price-icon {
						background-color: #999999;
					}

					.plus-price-color,
					.price-color {
						color: #999999;
					}
				}
			}
		}

		&.vip-box {
			padding: 0;

			.vip-info-box {
				background: linear-gradient(180deg, rgba(var(--primary-rgb-color), 0.1) 0%, rgba(255, 255, 255, 0.92) 100%);
				padding: 36rpx 20rpx 38rpx;
				border-radius: 12rpx 12rpx 0 0;

				.vip-right {
					flex: 1;
					overflow: hidden;
					margin-left: 20rpx;

					.vip-info-top {
						width: 100%;

						.vip-name-box {
							flex: 1;
							overflow: hidden;
							font-size: 30rpx;
							line-height: 38rpx;
							color: #1E1E1E;

							.plus-vip-icon {
								font-size: 69rpx;
								margin-left: 4rpx;
								color: #BE9161;
							}

							.vip-icon {
								font-size: 69rpx;
								margin-left: 4rpx;
								color: #E88752;
							}
						}
					}
				}
			}

			.coupon-box {
				height: 94rpx;
				padding: 0;

				.coupon-left {
					.coupon-icon {
						font-size: 40rpx;
						margin-right: 30rpx;
						margin-left: 10rpx;
						background: -webkit-linear-gradient(135deg, #EFCA84 0%, #DFAB47 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}

					.coupon-text {
						font-size: 30rpx;
						line-height: 36rpx;
						color: #1E1E1E;
					}
				}

				.coupon-right {
					font-size: 30rpx;
					line-height: 36rpx;

					.coupon-tips {
						color: #5F6267;
					}

					.coupon-pl {
						color: #929397;
					}
				}

			}

			.vip-info-text {
				font-size: 28rpx;
				color: #929397;
				line-height: 36rpx;
				white-space: nowrap;

				&+.vip-info-text {
					margin-left: 20rpx;
				}
			}
		}

		.remark-textarea {
			width: 100%;
			height: 202rpx;
			line-height: 36rpx;
			font-size: 30rpx;
			color: #333333;
			padding-bottom: 52rpx;
		}

		.textarea-pl {
			line-height: 36rpx;
			font-size: 30rpx;
			color: #999999;
		}

		.textarea-count-tip {
			position: absolute;
			bottom: 16rpx;
			right: 20rpx;
			font-size: 26rpx;
			line-height: 34rpx;
			color: #CCCCCC;
		}

		.right-icon {
			font-size: 18rpx;
			padding: 10rpx;
			margin: 0 -10rpx 0 2rpx;
			color: #999999;
		}
	}

	.footer-box {
		width: 100%;
		height: 124rpx;
		box-shadow: 0px -8px 20px rgba(0, 0, 0, 0.03);
		background-color: #FFFFFF;
		padding: 0 20rpx;
		box-sizing: border-box;
		z-index: 1;

		.footer-left {
			.footer-text {
				font-size: 26rpx;
				line-height: 30rpx;
				color: #333333;

				.price {
					color: #FF3D3D;
				}
			}

			.footer-price {
				font-size: 36rpx;
				line-height: 36rpx;
				font-weight: 500;
				color: #FF3D3D;
			}

			.starting-tip {
				font-size: 26rpx;
				color: #666666;
				line-height: 36rpx;
			}

			.delivery-cost {
				font-size: 24rpx;
				line-height: 36rpx;
				color: #929397;
				margin-top: 6rpx;
			}
		}

		.footer-btn {
			width: 224rpx;
			height: 76rpx;
			line-height: 76rpx;
			text-align: center;
			color: #FFFFFF;
			background-color: var(--primary-color);
			border-radius: 38rpx;
			margin-left: 20rpx;

			&.disabled {
				background-color: #BBBBBB;
			}
		}
	}

	.primary {
		color: var(--primary-color) !important;
	}

	.mar-top-12 {
		margin-top: 12rpx;
	}

	.mar-top-16 {
		margin-top: 16rpx;
	}
</style>
